<template>
  <div class="item-detail-page">
    <!-- 页面头部区域 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <el-icon><Back @click="$router.go(-1)" class="back-icon" /></el-icon>
          {{ item.type === "lost" ? "寻物启事" : "失物招领" }}
        </h2>
        <div class="status-tags">
          <el-tag
            :type="item.type === 'lost' ? 'danger' : 'success'"
            effect="dark"
          >
            {{ item.type === "lost" ? "寻物启事" : "失物招领" }}
          </el-tag>
          <el-tag :type="getStatusType(item.status)" effect="plain">
            {{ getStatusText(item.status) }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 商品标题区 -->
      <div class="item-title-section">
        <h1>{{ item.name }}</h1>
        <div class="meta-info">
          <span class="info-time">
            <el-icon><Calendar /></el-icon>
            {{ formatDate(item.time) }}
          </span>
          <span class="info-location">
            <el-icon><Location /></el-icon>
            {{
              Array.isArray(item.location)
                ? item.location.join(" - ")
                : item.location
            }}
          </span>
        </div>
      </div>

      <!-- 物品内容双列布局 -->
      <div class="item-content-layout">
        <!-- 左侧：图片轮播区 -->
        <div class="item-gallery-section">
          <div class="gallery-card">
            <div class="gallery-container">
              <el-carousel
                :interval="5000"
                arrow="always"
                indicator-position="outside"
                height="400px"
                class="main-carousel"
              >
                <el-carousel-item
                  v-for="(img, index) in item.images"
                  :key="index"
                >
                  <div class="carousel-item">
                    <el-image
                      :src="img"
                      fit="contain"
                      class="carousel-image"
                      :preview-src-list="item.images"
                      :initial-index="index"
                    ></el-image>
                  </div>
                </el-carousel-item>
              </el-carousel>

              <!-- 缩略图预览 -->
              <div
                class="thumbnails-row"
                v-if="item.images && item.images.length > 1"
              >
                <div
                  v-for="(img, index) in item.images"
                  :key="index"
                  class="thumbnail-item"
                  @click="activeThumbnail = index"
                  :class="{ active: activeThumbnail === index }"
                >
                  <el-image :src="img" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：物品详情区 -->
        <div class="item-detail-section">
          <el-card class="info-card">
            <div class="card-section-title">
              <div class="title-line">
                <span>物品信息</span>
              </div>
            </div>

            <div class="info-list">
              <div class="info-item">
                <div class="info-label">
                  <el-icon><Goods /></el-icon>
                  物品分类
                </div>
                <div class="info-value">
                  {{ item.categoryName || "未分类" }}
                </div>
              </div>

              <div class="info-item">
                <div class="info-label">
                  <el-icon><Timer /></el-icon>
                  {{ item.type === "lost" ? "丢失时间" : "拾到时间" }}
                </div>
                <div class="info-value">{{ formatDate(item.time) }}</div>
              </div>

              <div class="info-item">
                <div class="info-label">
                  <el-icon><Location /></el-icon>
                  {{ item.type === "lost" ? "丢失地点" : "拾到地点" }}
                </div>
                <div class="info-value">
                  {{
                    Array.isArray(item.location)
                      ? item.location.join(" - ")
                      : item.location
                  }}
                </div>
              </div>

              <div class="info-item" v-if="item.reward && item.type === 'lost'">
                <div class="info-label">
                  <el-icon><Money /></el-icon>
                  悬赏金额
                </div>
                <div class="info-value reward">¥{{ item.reward }}</div>
              </div>
            </div>

            <div class="card-section-title">
              <div class="title-line">
                <span>物品描述</span>
              </div>
            </div>

            <div class="description-content">
              <p>{{ item.description || "暂无详细描述" }}</p>
            </div>

            <div class="card-section-title">
              <div class="title-line">
                <span>联系方式</span>
              </div>
            </div>

            <div class="contact-info">
              <template v-if="item.contact">
                <div class="contact-item" v-if="item.contact.name">
                  <el-icon><User /></el-icon>
                  <span class="contact-label">联系人：</span>
                  <span class="contact-value">{{ item.contact.name }}</span>
                </div>

                <div class="contact-item" v-if="item.contact.phone">
                  <el-icon><Phone /></el-icon>
                  <span class="contact-label">电话：</span>
                  <span class="contact-value">{{ item.contact.phone }}</span>
                </div>

                <div class="contact-item" v-if="item.contact.wechat">
                  <el-icon><ChatDotRound /></el-icon>
                  <span class="contact-label">微信：</span>
                  <span class="contact-value">{{ item.contact.wechat }}</span>
                </div>
              </template>

              <div
                class="contact-item"
                v-else-if="typeof item.contact === 'string'"
              >
                <el-icon><Phone /></el-icon>
                <span class="contact-label">联系方式：</span>
                <span class="contact-value">{{ item.contact }}</span>
              </div>

              <div class="empty-contact" v-else>
                <el-icon><Warning /></el-icon>
                <span>暂无联系方式</span>
              </div>
            </div>

            <div class="action-buttons">
              <el-button type="primary" round @click="contactPublisher">
                <el-icon><Phone /></el-icon>联系发布者
              </el-button>
              <el-button type="success" round plain @click="shareItem">
                <el-icon><Share /></el-icon>分享
              </el-button>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 评论区域 -->
      <div class="comments-section">
        <div class="section-title">
          <h3>
            物品评论 <span class="comment-count">({{ comments.length }})</span>
          </h3>
        </div>

        <!-- 评论输入框 -->
        <div class="comment-input-area">
          <el-avatar
            :src="currentUserAvatar || defaultAvatar"
            :size="40"
          ></el-avatar>
          <div class="comment-form">
            <el-input
              v-model="newComment"
              type="textarea"
              :rows="2"
              placeholder="写下你的评论..."
              resize="none"
              maxlength="200"
              show-word-limit
            ></el-input>
            <div class="comment-actions">
              <el-button
                type="primary"
                @click="submitComment"
                :disabled="!newComment.trim()"
              >
                发表评论
              </el-button>
            </div>
          </div>
        </div>

        <!-- 评论列表 -->
        <div class="comment-list">
          <div v-if="comments.length > 0">
            <div
              class="comment-item"
              v-for="comment in comments"
              :key="comment.id"
            >
              <el-avatar
                :src="comment.user ? comment.user.avatar : defaultAvatar"
                :size="40"
              ></el-avatar>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-author">{{
                    comment.user ? comment.user.name : "匿名用户"
                  }}</span>
                  <span class="comment-time">{{
                    formatCommentTime(comment.createTime)
                  }}</span>
                </div>
                <div class="comment-body">
                  {{ comment.content }}
                </div>
                <div class="comment-footer">
                  <div class="comment-actions">
                    <span class="action-item" @click="likeComment(comment)">
                      <el-icon :class="{ 'is-liked': comment.liked }"
                        ><ThumbUp
                      /></el-icon>
                      {{ comment.likes > 0 ? comment.likes : "点赞" }}
                    </span>
                    <span
                      class="action-item"
                      @click="showReplyForm(comment.id)"
                    >
                      <el-icon><ChatDotRound /></el-icon>
                      回复
                    </span>
                  </div>
                </div>

                <!-- 回复列表 -->
                <div
                  class="reply-list"
                  v-if="comment.replies && comment.replies.length > 0"
                >
                  <div
                    class="reply-item"
                    v-for="reply in comment.replies"
                    :key="reply.id"
                  >
                    <el-avatar
                      :src="reply.user ? reply.user.avatar : defaultAvatar"
                      :size="30"
                    ></el-avatar>
                    <div class="reply-content">
                      <div class="reply-header">
                        <span class="reply-author">{{
                          reply.user ? reply.user.name : "匿名用户"
                        }}</span>
                        <span class="reply-target" v-if="reply.replyTo">
                          回复 {{ reply.replyTo.name || "匿名用户" }}
                        </span>
                        <span class="reply-time">{{
                          formatCommentTime(reply.createTime)
                        }}</span>
                      </div>
                      <div class="reply-body">
                        {{ reply.content }}
                      </div>
                      <div class="reply-footer">
                        <div class="reply-actions">
                          <span class="action-item" @click="likeReply(reply)">
                            <el-icon :class="{ 'is-liked': reply.liked }"
                              ><ThumbUp
                            /></el-icon>
                            {{ reply.likes > 0 ? reply.likes : "点赞" }}
                          </span>
                          <span
                            class="action-item"
                            @click="prepareReplyToReply(comment, reply)"
                          >
                            <el-icon><ChatDotRound /></el-icon>
                            回复
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 回复输入框 -->
                <div
                  class="reply-input-area"
                  v-if="activeReplyId === comment.id && replyVisible"
                >
                  <el-avatar
                    :src="currentUserAvatar || defaultAvatar"
                    :size="30"
                  ></el-avatar>
                  <div class="reply-form">
                    <div class="reply-to-info" v-if="activeReply">
                      回复给：<span class="reply-name">{{
                        activeReply.user?.name
                      }}</span>
                    </div>
                    <el-input
                      v-model="replyContent"
                      type="textarea"
                      :rows="1"
                      placeholder="写下你的回复..."
                      resize="none"
                      maxlength="100"
                      show-word-limit
                    ></el-input>
                    <div class="reply-actions">
                      <el-button size="small" @click="cancelReply"
                        >取消</el-button
                      >
                      <el-button
                        type="primary"
                        size="small"
                        @click="submitReply(comment.id)"
                        :loading="replySubmitting"
                      >
                        回复
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 无评论状态 -->
          <div v-else class="no-comments">
            <el-icon :size="48"><ChatSquare /></el-icon>
            <p>暂无评论，快来说点什么吧~</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Back,
  Calendar,
  Location,
  User,
  Phone,
  ChatDotRound,
  ThumbUp,
  Money,
  Goods,
  Timer,
  Warning,
  ChatSquare,
  Share,
} from "@element-plus/icons-vue";
import api from "@/utils/api";

export default {
  name: "ItemDetail",
  components: {
    Back,
    Calendar,
    Location,
    User,
    Phone,
    ChatDotRound,
    ThumbUp,
    Money,
    Goods,
    Timer,
    Warning,
    ChatSquare,
    Share,
  },
  setup() {
    const route = useRoute();
    const loading = ref(true);

    // 数据状态
    const item = ref({});
    const comments = ref([]);
    const newComment = ref("");
    const replyText = ref("");
    const replyVisible = ref(false);
    const activeComment = ref(null);
    const activeReply = ref(null);
    const currentUserAvatar = ref(
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    );
    const activeThumbnail = ref(0);
    const defaultAvatar = ref(
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    );
    const commentSubmitting = ref(false);
    const replySubmitting = ref(false);
    const activeReplyId = ref(null);
    const replyContent = ref("");

    // 获取物品详情
    const fetchItemDetail = async () => {
      loading.value = true;
      try {
        const itemId = route.params.id;
        const response = await api.get(`/items/${itemId}`);

        if (response.data.code === 200) {
          item.value = response.data.data;
        } else {
          ElMessage.error(response.data.message || "获取物品详情失败");
        }
      } catch (error) {
        console.error("获取物品详情失败:", error);
        ElMessage.error("获取物品详情失败，请稍后再试");
      } finally {
        loading.value = false;
      }
    };

    // 获取评论列表
    const fetchComments = async () => {
      try {
        const itemId = route.params.id;
        const response = await api.get(`/items/${itemId}/comments`);

        if (response.data.code === 200) {
          comments.value = response.data.data;
        }
      } catch (error) {
        console.error("获取评论失败:", error);
      }
    };

    // 发表评论函数
    const submitComment = async () => {
      if (!newComment.value.trim()) {
        ElMessage.warning("评论内容不能为空");
        return;
      }

      commentSubmitting.value = true;
      try {
        const itemId = route.params.id;
        const response = await api.post(`/items/${itemId}/comments`, {
          content: newComment.value,
        });

        if (response.data.code === 200) {
          ElMessage.success("评论发表成功");
          newComment.value = ""; // 清空评论框
          fetchComments(); // 重新加载评论列表
        } else {
          ElMessage.error(response.data.message || "评论发表失败");
        }
      } catch (error) {
        console.error("评论发表失败:", error);
        // 检查是否是认证错误
        if (error.response && error.response.status === 401) {
          ElMessage.error("请先登录后再评论");
        } else {
          ElMessage.error("评论发表失败，请稍后再试");
        }
      } finally {
        commentSubmitting.value = false;
      }
    };

    // 点赞评论
    const likeComment = async (comment) => {
      try {
        if (comment.liked) {
          // 取消点赞
          await api.delete(`/comments/${comment.id}/like`);
        } else {
          // 点赞
          await api.post(`/comments/${comment.id}/like`);
        }

        // 切换点赞状态并更新点赞数
        comment.liked = !comment.liked;
        comment.likes = comment.liked ? comment.likes + 1 : comment.likes - 1;
      } catch (error) {
        console.error("点赞操作失败:", error);
        ElMessage.error("点赞操作失败，请稍后再试");
      }
    };

    // 点赞回复
    const likeReply = async (reply) => {
      try {
        if (reply.liked) {
          // 取消点赞
          await api.delete(`/replies/${reply.id}/like`);
        } else {
          // 点赞
          await api.post(`/replies/${reply.id}/like`);
        }

        // 切换点赞状态并更新点赞数
        reply.liked = !reply.liked;
        reply.likes = reply.liked ? reply.likes + 1 : reply.likes - 1;
      } catch (error) {
        console.error("点赞操作失败:", error);
        ElMessage.error("点赞操作失败，请稍后再试");
      }
    };

    // 准备回复评论
    const prepareReply = (comment) => {
      activeComment.value = comment;
      activeReply.value = null;
      replyText.value = "";
      replyVisible.value = true;
    };

    // 准备回复其他回复
    const prepareReplyToReply = (comment, reply) => {
      activeComment.value = comment;
      activeReply.value = reply;
      replyText.value = "";
      replyVisible.value = true;
    };

    // 取消回复
    const cancelReply = () => {
      replyVisible.value = false;
      activeComment.value = null;
      activeReply.value = null;
      replyText.value = "";
    };

    // 提交回复
    const submitReply = async (commentId) => {
      if (!replyContent.value.trim()) {
        ElMessage.warning("回复内容不能为空");
        return;
      }

      replySubmitting.value = true;
      try {
        const response = await api.post(
          `/items/${route.params.id}/comments/${commentId}/replies`,
          {
            content: replyContent.value,
          }
        );

        if (response.data.code === 200) {
          ElMessage.success("回复成功");
          replyContent.value = "";
          activeReplyId.value = null;
          fetchComments(); // 重新加载评论和回复
        } else {
          ElMessage.error(response.data.message || "回复失败");
        }
      } catch (error) {
        console.error("回复失败:", error);
        if (error.response && error.response.status === 401) {
          ElMessage.error("请先登录后再回复");
        } else {
          ElMessage.error("回复失败，请稍后再试");
        }
      } finally {
        replySubmitting.value = false;
      }
    };

    // 显示回复表单
    const showReplyForm = (commentId) => {
      activeReplyId.value = commentId;
      replyContent.value = ""; // 清空回复内容
      replyVisible.value = true;
      activeComment.value =
        comments.value.find((c) => c.id === commentId) || null;
    };

    // 联系物品发布者
    const contactPublisher = async () => {
      try {
        const itemId = route.params.id;
        const response = await api.get(`/items/${itemId}/contact`);

        if (response.data.code === 200) {
          const contactInfo = response.data.data;
          ElMessageBox.alert(
            `联系人: ${contactInfo.name || "未提供"}<br>
             电话: ${contactInfo.phone || "未提供"}<br>
             微信: ${contactInfo.wechat || "未提供"}`,
            "联系方式",
            {
              dangerouslyUseHTMLString: true,
              confirmButtonText: "复制联系方式",
              callback: () => {
                const text = `联系人: ${contactInfo.name || ""}\n电话: ${
                  contactInfo.phone || ""
                }\n微信: ${contactInfo.wechat || ""}`;
                navigator.clipboard
                  .writeText(text)
                  .then(() => ElMessage.success("联系方式已复制到剪贴板"))
                  .catch(() => ElMessage.error("复制失败，请手动复制"));
              },
            }
          );
        } else {
          ElMessage.error(response.data.message || "获取联系方式失败");
        }
      } catch (error) {
        console.error("获取联系方式失败:", error);
        ElMessage.error("获取联系方式失败，请稍后重试");
      }
    };

    // 分享物品
    const shareItem = () => {
      const shareUrl = window.location.href;
      navigator.clipboard
        .writeText(shareUrl)
        .then(() => ElMessage.success("链接已复制到剪贴板，可以分享给他人"))
        .catch(() => ElMessage.error("复制失败，请手动复制链接"));
    };

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return "";
      const d = new Date(date);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(d.getDate()).padStart(2, "0")} ${String(
        d.getHours()
      ).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
    };

    // 格式化评论时间，显示为"几分钟前"、"几小时前"等
    const formatCommentTime = (date) => {
      if (!date) return "";
      const now = new Date();
      const commentDate = new Date(date);
      const diffMs = now - commentDate;
      const diffMin = Math.floor(diffMs / 60000);
      const diffHours = Math.floor(diffMs / 3600000);
      const diffDays = Math.floor(diffMs / 86400000);

      if (diffMin < 1) return "刚刚";
      if (diffMin < 60) return `${diffMin}分钟前`;
      if (diffHours < 24) return `${diffHours}小时前`;
      if (diffDays < 30) return `${diffDays}天前`;

      return formatDate(date);
    };

    // 获取状态类型
    const getStatusType = (status) => {
      switch (status) {
        case "pending":
          return "info";
        case "completed":
          return "success";
        case "canceled":
          return "danger";
        default:
          return "info";
      }
    };

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case "pending":
          return "未认领";
        case "completed":
          return "已认领";
        case "canceled":
          return "已取消";
        default:
          return "未知状态";
      }
    };

    // 在组件挂载时获取数据
    onMounted(() => {
      fetchItemDetail();
      fetchComments();
      window.scrollTo(0, 0);
    });

    return {
      item,
      comments,
      newComment,
      replyText,
      replyVisible,
      activeComment,
      activeReply,
      currentUserAvatar,
      activeThumbnail,
      loading,
      formatDate,
      formatCommentTime,
      getStatusType,
      getStatusText,
      submitComment,
      likeComment,
      likeReply,
      prepareReply,
      prepareReplyToReply,
      cancelReply,
      submitReply,
      contactPublisher,
      shareItem,
      defaultAvatar,
      commentSubmitting,
      replySubmitting,
      activeReplyId,
      replyContent,
      showReplyForm,
    };
  },
};
</script>

<style scoped>
/* 页面容器样式 - 修复宽度冲突并移除不必要的滚动条 */
.item-detail-page {
  width: 940px; /* 只保留一个固定宽度 */
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100vh;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 页面头部样式 */
.page-header {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
  background-color: #fff;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.back-icon {
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.status-tags {
  display: flex;
  gap: 10px;
}

/* 主要内容区域 */
.main-content {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  width: 100%;
  overflow-x: hidden; /* 防止内容区域水平滚动 */
}

/* 标题区域 */
.item-title-section {
  padding: 20px 30px;
  border-bottom: 1px solid #ebeef5;
}

.item-title-section h1 {
  font-size: 24px;
  color: #303133;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #909399;
  font-size: 14px;
}

.meta-info .el-icon {
  margin-right: 5px;
  font-size: 16px;
}

/* 内容布局 */
.item-content-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 30px;
  width: 100%;
  overflow: visible; /* 确保内容可见但不产生滚动条 */
}

/* 图片轮播区 */
.item-gallery-section {
  border-radius: 8px;
  overflow: hidden;
}

.gallery-card {
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
}

.gallery-container {
  width: 100%;
}

.carousel-item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 缩略图预览 */
.thumbnails-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 0 10px 10px 10px;
  overflow-x: auto; /* 保留这个滚动功能 */
  /* 美化滚动条 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #dcdfe6 #f2f6fc; /* Firefox */
}

/* Webkit浏览器的滚动条美化 */
.thumbnails-row::-webkit-scrollbar {
  height: 6px;
}

.thumbnails-row::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.thumbnails-row::-webkit-scrollbar-track {
  background-color: #f2f6fc;
}

.thumbnail-item {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
}

.thumbnail-item.active {
  border-color: #409eff;
}

.thumbnail-item .el-image {
  width: 100%;
  height: 100%;
}

/* 物品详情区 */
.item-detail-section {
  border-radius: 8px;
  overflow: hidden;
}

.info-card {
  height: 100%;
  box-shadow: none !important;
  border: 1px solid #ebeef5;
}

.card-section-title {
  margin: 0 0 15px 0;
  position: relative;
}

.title-line {
  display: inline-block;
  position: relative;
  padding-left: 12px;
}

.title-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #409eff;
  border-radius: 2px;
}

.title-line span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-list {
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.info-label {
  width: 120px;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.info-label .el-icon {
  margin-right: 6px;
  font-size: 16px;
  color: #409eff;
}

.info-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

.info-value.reward {
  color: #f56c6c;
  font-weight: bold;
}

.description-content {
  margin-bottom: 25px;
  color: #303133;
  font-size: 14px;
  line-height: 1.8;
}

.contact-info {
  margin-bottom: 25px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.contact-item .el-icon {
  margin-right: 8px;
  color: #409eff;
  font-size: 16px;
}

.contact-label {
  color: #606266;
  margin-right: 5px;
}

.contact-value {
  color: #303133;
  font-weight: 500;
}

.empty-contact {
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.empty-contact .el-icon {
  margin-right: 5px;
  color: #e6a23c;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

/* 评论区样式 */
.comments-section {
  padding: 30px;
  border-top: 1px solid #ebeef5;
}

.section-title {
  margin-bottom: 20px;
}

.section-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.comment-count {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.comment-input-area {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.comment-form {
  flex: 1;
}

.comment-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  display: flex;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-text {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 10px;
  word-break: break-word;
}

.comment-actions-bar {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.action-item {
  margin-right: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.action-item .el-icon {
  margin-right: 3px;
}

.action-item.liked {
  color: #f56c6c;
}

.reply-list {
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-top: 10px;
  padding: 8px 12px;
}

.reply-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.reply-item:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.reply-content {
  flex: 1;
}

.reply-author {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.reply-target {
  color: #666;
  font-weight: normal;
}

.reply-text {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 4px;
}

.reply-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.reply-actions {
  display: flex;
  gap: 12px;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #909399;
}

.no-comments p {
  margin-top: 10px;
  font-size: 14px;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .item-detail-page {
    width: 100%; /* 在小屏幕上使用100%宽度 */
  }
}

@media (max-width: 767px) {
  .item-detail-page {
    padding: 0 10px;
  }

  .page-title {
    font-size: 18px;
  }

  .item-title-section h1 {
    font-size: 20px;
  }

  .item-content-layout {
    padding: 20px;
  }

  .comments-section {
    padding: 20px;
  }

  .thumbnail-item {
    width: 50px;
    height: 50px;
  }
}

/* 更强的修复方案 */
.action-item.share-btn {
  color: #000000 !important; /* 强制黑色文字 */
  background-color: #ffffff !important; /* 强制白色背景 */
  border: 1px solid #dcdfe6 !important; /* 强制显示边框 */
  font-weight: 500 !important; /* 加粗文字 */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important; /* 文字阴影增强可见性 */
}

/* 确保所有按钮文字可见 */
.action-items .action-item {
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 1px solid #dcdfe6 !important;
  padding: 8px 15px !important;
  margin: 0 5px !important;
  font-weight: normal !important;
}

/* 按钮内图标和文字的间距 */
.action-item .el-icon + span,
.action-item svg + span {
  margin-left: 5px !important;
  display: inline-block !important;
}

/* 修复分享按钮文字不可见问题 - 改进版 */
:deep(.el-button--success.is-plain) {
  /* 使用深绿色文字 - 与按钮主题更协调 */
  --el-button-text-color: #2e7d32 !important;
  --el-button-border-color: #67c23a !important;
  --el-button-bg-color: #f0f9eb !important;
  --el-button-hover-text-color: #67c23a !important;
  --el-button-hover-bg-color: #f0f9eb !important;
  --el-button-hover-border-color: #67c23a !important;
  font-weight: 500 !important;
  text-shadow: none !important; /* 移除文字阴影 */
}

/* 确保图标与文字间有足够间距并且颜色一致 */
:deep(.el-button .el-icon) {
  margin-right: 5px !important;
  color: inherit !important; /* 图标颜色与文字颜色一致 */
}

/* 确保按钮内文字大小合适 */
:deep(.el-button) {
  font-size: 14px !important;
}
</style>